<template>

    <section class="Banner" id="Banner">
        <div class="content">
            <h3>explore the school</h3>
            <p>欢迎来到阿兰星落学校论坛页面</p>
            <a class="btn" @click="handleClick">发布文章</a>
        </div>
    </section>
</template>

<script setup>
import { useRouter } from 'vue-router'

const $router = useRouter()
const handleClick = () => {
    $router.push({
        path: '/addArticle'
    })
}
</script>

<style lang="scss" scoped>
section {
    padding: 2rem 9%;
}

.Banner {
    min-height: 80vh;
    background: url(@/assets/image/4.png) no-repeat;
    background-size: cover;
    background-position: center;
    display: grid;
    place-items: center;
    padding-top: 8rem;
}

.Banner .content {
    text-align: center;
    background-color: #fff;
    padding: 3rem;
    max-width: 50rem;
    border-radius: .5rem;
}

.Banner .content h3 {
    font-size: 4rem;
    color: #222;
    text-transform: uppercase;
}

.Banner .content p {
    font-size: 1.6rem;
    line-height: 1.5;
    padding: 1rem 0;
    color: #DFC57B;
}

.btn {
    border: .2rem solid #222;
    display: inline-block;
    cursor: pointer;
    margin-top: 1rem;
    padding: 1rem 2rem;
    background: none;
    font-size: 1.6rem;
    color: #222;
}

.btn:hover {
    color: #eee;
    background-color: #222;
}
</style>